<template>
	<!-- 详情页面 -->
	<view class="container">
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in detail.pics" :key="index">
				<image :src="item.pics_big" mode="" @click="preview(index)"></image>
			</swiper-item>
		</swiper>
		<!-- 商品信息区域 -->
		<view class="goods-info-box">
			<!-- 价格区域 -->
			<view class="price">￥{{ detail.goods_price }}</view>
			<!-- 主体信息区域 -->
			<view class="goods-body">
				<!-- 标题区域 -->
				<view class="title">{{ detail.goods_name }}</view>
				<!-- 收藏区域 -->
				<view class="collect">
					<uni-icons type="star" size="19"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<!-- 运费区域 -->
			<view class="freight">快递：免运费 {{ cart }}</view>
		</view>
		<!-- 商品详情区域 -->
		<rich-text :nodes="detail.goods_introduce"></rich-text>
		<!-- 底部商品导航 -->
		<view class="goods-nav">
			<uni-goods-nav :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapState('m_cart', ['cart']),
			...mapGetters('m_cart', ['cartTotal'])
		},
		// 监听数据变化
		watch: {
			// 定义监听器，指向配置对象，监听购物车数量
			cartTotal: {
				handler(newValue) {
					this.options[1].info = newValue;
				},
				// 侦听开始之后被立即调用
				immediate: true
			}
		},
		data() {
			return {
				// 商品详情
				detail: {},
				// 商品导航组件参数
				options: [{
						icon: 'shop',
						text: '店铺'
					},
					{
						icon: 'cart',
						text: '购物车',
						info: 0
					}
				],
				// 商品导航组件按钮组参数
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			};
		},
		onLoad(options) {
			this.getGoodsDetail(options.goods_id)
		},
		methods: {
			...mapMutations('m_cart', ['addCart']),
			// 获取商品详情
			async getGoodsDetail(goods_id) {
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/goods/detail', {
					goods_id
				});
				if (res.meta.status !== 200) return uni.$showMsg();
				res.message.goods_introduce.replace(/<img /g, '<img style="display:block;"').replace(/webp/, 'jpg');
				this.detail = res.message;
			},
			// 图片预览
			preview(index) {
				uni.previewImage({
					current: index,
					urls: this.detail.pics.map(x => x.pics_big)
				});
			},
			// 底部商品导航左侧点击事件
			onClick(e) {
				if (e.index === 1) {
					// 跳转至指定tabBar页面
					uni.switchTab({
						url: '/pages/cart/index'
					});
				} else {
					console.log('店铺');
				}
			},// 底部商品导航右侧点击事件
			buttonClick() {
				const goods = {
					goods_id: this.detail.goods_id,
					goods_name: this.detail.goods_name,
					goods_price: this.detail.goods_price,
					goods_count: 1,
					goods_small_logo: this.detail.goods_small_logo,
					goods_state: true
				}// 加入购物车
				this.addCart(goods)
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-bottom: 50px;

		// 轮播图
		swiper {
			height: 500rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		// 商品信息区域
		.goods-info-box {
			padding: 10px;

			// 价格
			.price {
				font-size: 16px;
				color: #d81e06;
				margin: 15px 0 10px 0;
			}

			// 主体信息
			.goods-body {
				display: flex;

				// 标题
				.title {
					border-right: 1px solid #464646;
					font-size: 13px;
				}

				// 收藏
				.collect {
					margin-left: 3px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					width: 80px;

					text {
						font-size: 12px;
						color: gray;
					}
				}
			}

			// 运费
			.freight {
				font-size: 12px;
				color: gray;
				margin: 5px 0 20px 0;
			}
		}

		// 底部商品导航
		.goods-nav {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
		}
	}
</style>